<template>
<div class="page-wrapper">
  <div class="s1">
    <p>p</p>
    <span>span</span>
  </div>

  <div class="s2">
    <p>外部引入scss</p>
  </div>

  <div class="s3">混入</div>
  <div class="s4">继承</div>
</div>
</template>

<script>

export default {
name: "index",
}
</script>

<style scoped lang="scss">
@import "src/style/myscss";
//定义变量
$width:200px;
$height:200px;
$background: #a2b9bc;
$color:#ffffff;
$margin:10px;
.s1{
  //局部作用--修改值
  $background:#eeeeee;
  //引用变量
  width: $width;
  height: $height;
  background: $background;
  margin-top: 20px;
  //嵌套
  p{
    color: #bb5e8e;
  }
  span{
    color: #d4a869;
    &:hover{
      color: #409EFF;
    }
  }
  //父选择器的标识符&;
  &:hover{
    background: #bb5e8e;
  }
}

.s2{
  margin-top: $margin;
  width: $width;
  height: $height;
  background: $background;
  p{
    color: $my-color;
  }
}

/**
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
 */

@mixin mix-test{
  margin-top: 10px;
  background: #d4a869;
  color: #323b4e;
  border: 1px #409EFF dashed;
}
//定义 变量
@mixin mix-test-args($w,$h){
  width: $w;
  height: $h;
}

.s3{
  @include mix-test;
  @include mix-test-args(200px,150px);
  font-size: 30px;
}


//继承
.s4{
  @extend .s3;
  background: #409EFF;
}

</style>